code:
<div class="container">
<img src="../images/1.jpg">
<img src="../images/1.jpg">
<img src="../images/1.jpg">
<img src="../images/1.jpg">
</div>
<style>
.container {position: relative; width: 20vw; height: 12vw; margin-top: 5vw; background: rgba(0, 0, 0, 0); transform:
rotate(-30deg) skew(25deg) scale(0.8); transition: 0.5s;}
.container img {position: absolute; width: 100%; transition: 0.5s;}
.container:hover img:nth-child(4) {transform: translate(16vw, -16vw); opacity: 1;}
.container:hover img:nth-child(3) {transform: translate(12vw, -12vw); opacity: 0.8;}
.container:hover img:nth-child(2) {transform: translate(8vw, -8vw); opacity: 0.6;}
.container:hover img:nth-child(1) {transform: translate(4vw, -4vw); opacity: 0.4;}
</style>
code:
<div class="boxes">
<div class="slider">
<input checked="checked" id="id1" name="ani" type="radio">
<label for="id1"><img src="../images/1.jpg" width="60"></label>
<img src="../images/1.jpg">
<input id="id2" name="ani" type="radio">
<label for="id2"><img src="../images/2.jpg" width="60"></label>
<img src="../images/2.jpg">
<input id="id3" name="ani" type="radio">
<label for="id3"><img src="../images//3.jpg" width="60"></label>
<img src="../images/3.jpg">
<input id="id4" name="ani" type="radio">
<label for="id4"><img src="../images/4.jpg" width="60"></label>
<img src="../images/4.jpg">
<input id="id5" name="ani" type="radio">
<label for="id5"><img src="../images/5.jpg" width="60"></label>
<img src="../images/5.jpg">
</div>
</div>
<style>
.boxes{display: grid;place-items: center; min-height: 40vw;}
.slider1 {width: 30vw; height: 20vw;position: relative; padding-top: 25vw; margin: 1vw auto;}
.slider1>img {position: absolute; left: 0; top: 0; transition: all 0.5s; width: 30vw; height: 25vw;}
.slider1 input[name='ani'] {display: none;}
.slider1 label { margin: 1vw 0 0 1vw; border: .3vw solid #999; float: left; cursor: pointer; transition: all 0.5s; opacity: 0.6; }
.slider1 label img {display: block;}
.slider1 input[name='ani']:checked+label {border-color: #666; opacity: 1;}
.slider1 input[name='ani']~img { opacity: 0; transform: scale(1.1);}
.slider1 input[name='ani']:checked+label+img {opacity: 1;transform: scale(1);}
</style>
code:
<section class="gallery">
<div class="basket">
<div class="toolbar">
<div class="search-wrapper">
<input type="search" placeholder="Search for photos">
<div class="counter">total photos: <span>12</span></div>
</div>
<ul class="view-options">
<li class="zoom"><input type="range" min="180" max="380" value="280"></li>
<li class="show-grid active"><button disabled><img src="../images/grid-view.svg"
alt="grid view"></button></li>
<li class="show-list"><button><img src="../images/list-view.svg" alt="list view">
</button></li>
</ul>
</div>
<ol class="image-list grid-view">
<li>
<figure><img src="../images/1.jpg" alt=""/><figcaption><p>lake in the evening</p>
</figcaption></figure>
</li>
<li>
<figure><img src="../images/2.jpg" alt=""/><figcaption><p>living on the beach</p>
</figcaption></figure>
</li>
<li>
<figure><img src="../images/3.jpg" alt=""/><figcaption><p>ready for a refreshing shower
</p></figcaption></figure>
</li>
<li>
<figure><img src="../images/4.jpg" alt=""><figcaption><p>ready for a sea trip</p>
</figcaption></figure>
</li>
<li>
<figure><img src="../images/5.jpg" alt=""><figcaption><p>relaxing on the beach</p>
</figcaption></figure>
</li>
<li>
<figure><img src="../images/7.jpg" alt=""><figcaption><p>evening meal at the local
restaurant</p></figcaption></figure>
</li>
<li>
<figure><img src="../images/8.jpg" alt=""><figcaption><p>returning to the beach after
the sea trip</p></figcaption></figure>
</li>
<li>
<figure><img src="../images/2018-Sh-02.jpg" alt=""><figcaption><p>scenery in Shanghai
- 2018</p></figcaption></figure>
</li>
<li>
<figure><img src="../images/2018-Sh-03.jpg" alt=""><figcaption><p>Shanghai's tallest
building - 2018</p></figcaption></figure>
</li>
<li>
<figure><img src="../images/2018-Sh-04.jpg" alt=""><figcaption><p>the Huangpu river in
Shanghai - 2018</p></figcaption></figure>
</li>
<li>
<figure><img src="../images/2018-Sh-05.jpg" alt=""><figcaption><p>near the market in
Changning districtlt;/p></figcaption></figure>
</li>
<li>
<figure><img src="../images/2018-Sh-06.jpg" alt=""><figcaption><p>flooding in Shanghai
in the summer of 2018</p></figcaption></figure>
</li>
</ol>
</div>
</section>
<style>
:root {--black: #1a1a1a; --white: #fff; --gray: #ccc; --darkgreen: #18846C;
--lightbrown: antiquewhite; --darkblack: rgba(0,0,0,0.8); --minRangeValue: 280px}
button {cursor: pointer; background: skyblue;}
ol img {display: block; max-width: 100%; height: auto; }
ol, ul {list-style: none;}
a:not(.grid_B a, h2~a) {color: inherit;}
.gallery {padding: 0 2vw;}
.basket {max-width: 100vw; margin: 0 auto;}
.d-none {display: none;}
/* TOOLBAR */
.toolbar {display: flex;justify-content: space-between; align-items: center;}
.toolbar .search-wrapper {position: relative;}
.toolbar input[type="search"] {font-size: 1vw; border: none; border-bottom: .1vw solid;
padding-bottom: .3vw; background: var(--lightbrown);}
.toolbar ::placeholder {color: var(--gray);}
.toolbar .counter {position: relative; left: 0; top: calc(100% + .5vw); font-size: 1.1vw;
color: var(--black); }
.view-options {display: flex;align-items: center;}
.view-options li:not(:last-child) {margin-right: 1.2vw;}
.view-options button {padding: .2vw; border: .3vw solid transparent;}
.view-options .active button {border-color: var(--darkgreen);}
/* IMAGE LIST */
.image-list {margin: 1vw 0;}
.image-list li {background: var(--lightbrown); color: var(--darkblack);}
.image-list p:first-child {font-weight: bold; font-size: 1.5vw;}
.image-list p:last-child {margin-top: 1.5vw;}
/* GRID VIEW */
.grid-view {display: grid; grid-gap: 1vw; grid-template-columns: repeat(auto-fit,
minmax(var(--minRangeValue), 1fr));}
.grid-view figcaption {padding: 1vw;}
/* LIST VIEW */
.list-view li + li { margin-top: 1.5vw; }
.list-view figure {display: grid; grid-gap: 1.5vw; grid-template-columns: 15vw 1fr;
align-items: center; }
/* Media Queries */
@media screen and (max-width: 900px) {
.toolbar input[type="range"] {display: none;}
}
@media screen and (max-width: 700px) {
.grid-view li {text-align: center; padding: 0.5vw;}
.grid-view figcaption {padding: 0.5vw 0 0; }
}
</style>
<script>
// VARIABLES
const rangeInput = document.querySelector('input[type = "range"]');
const imageList = document.querySelector(".image-list");
const searchInput = document.querySelector('input[type="search"]');
const btns = document.querySelectorAll(".view-options button");
const photosCounter = document.querySelector(".toolbar .counter span");
const imageListItems = document.querySelectorAll(".image-list li");
const captions = document.querySelectorAll(".image-list figcaption p:first-child");
const myArray = [];
let counter = 1;
const active = "active";
const listView = "list-view";
const gridView = "grid-view";
const dNone = "d-none";
// SET VIEW
for (const btn of btns) {
btn.addEventListener("click", function() {
const parent = this.parentElement;
document.querySelector(".view-options .active").classList.remove(active);
parent.classList.add(active);
this.disabled = true;
document.querySelector('.view-options [class^="show-"]:not(.active) button').disabled = false;
if (parent.classList.contains("show-list")) {
parent.previousElementSibling.previousElementSibling.classList.add(dNone);
imageList.classList.remove(gridView);
imageList.classList.add(listView);
} else {
parent.previousElementSibling.classList.remove(dNone);
imageList.classList.remove(listView);
imageList.classList.add(gridView);
}
});
}
// SET THUMBNAIL VIEW - CHANGE CSS VARIABLE
rangeInput.addEventListener("input", function() {
document.documentElement.style.setProperty("--minRangeValue",`${this.value}px`);
});
// SEARCH FUNCTIONALITY
for (const caption of captions) {
myArray.push({
id: counter++,
text: caption.textContent
});
}
searchInput.addEventListener("keyup", keyupHandler);
function keyupHandler() {
for (const item of imageListItems) {
item.classList.add(dNone);
}
const text = this.value;
const filteredArray = myArray.filter(el => el.text.includes(text));
if (filteredArray.length > 0) {
for (const el of filteredArray) {
document.querySelector(`.image-list li:nth-child(${el.id})`).classList.remove(dNone);
}
}
photosCounter.textContent = filteredArray.length;
}
</script>
